<div class="grid l:grid-cols-2 gap-6 mb-4">
    <div class="crayons-field">
    <div class="crayons-field">
      <%= form.label :type_of, "Type:", class: "crayons-field__label" %>
      <%= form.select :type_of, options_for_select(Email.type_ofs.keys, selected: @email.type_of), {}, { class: "crayons-textfield", autocomplete: "off" } %>
    </div>

    <div class="crayons-field">
      <%= form.label :user_query_id, "User Query:", class: "crayons-field__label" %>
      <%= form.select :user_query_id, options_for_select([["Select a user query", nil]] + @user_queries.map { |q| [q.name, q.id]}), {}, { class: "crayons-textfield", autocomplete: "off", id: "user_query_select" }  %>
      <p class="crayons-field__description">Choose a user query to target specific users</p>
    </div>

    <div class="crayons-field" id="variables_section" style="display: none;">
      <%= form.label :variables, "Query Variables (JSON):", class: "crayons-field__label" %>
      <%= form.text_area :variables, rows: 4, class: "crayons-textfield font-mono", placeholder: '{"date_from": "2023-01-01", "status": "active"}' %>
      <p class="crayons-field__description">Enter variables as JSON for the selected user query</p>
    </div>

    <div class="crayons-field">
      <%= form.label :subject, "Subject:", class: "crayons-field__label" %>
      <%= form.text_field :subject, class: "crayons-textfield", autocomplete: "off" %>
    </div>

    <div class="crayons-field">
      <%= form.label :drip_day, "Drip Day (onboarding drip only):", class: "crayons-field__label" %>
      <%= form.number_field :drip_day, class: "crayons-textfield", autocomplete: "off" %>
    </div>

    <div class="crayons-field">
      <%= form.label :status, "Status:", class: "crayons-field__label" %>
      <%= form.select :status, options_for_select(Email.statuses.keys, selected: @email.status), {}, { class: "crayons-textfield", autocomplete: "off" } %>
    </div>

    <div class="crayons-field">
      <%= form.label :body, "Body Content:", class: "crayons-field__label" %>
      <%= form.text_area :body, size: "100x5", class: "crayons-textfield" %>
    </div>
  </div>

  <div>
    <div class="crayons-card crayons-card--secondary p-4">
      <% if @email.persisted? %>
        <h2 class="crayons-title mb-2">Preview</h2>
        <p><strong>Subject:</strong><%= Email.replace_merge_tags(@email.subject, current_user) %> </p>
        <p><strong>Body:</strong></p>
        <div class="crayons-article__body text-styles">
          <%= Email.replace_merge_tags(@email.body, current_user).html_safe %>
        </div>
      <% else %>
        <div class="flex flex-col gap-3">
          <p>
            Use this form to compose a new email. Fill in the subject, body, and specify the recipients.
          </p>
          <p>
            You can use the following merge tags:
          </p>
          <p>
            <code>*|name|*</code>, <code>*|username|*</code>, <code>*|email|*</code>
          </p>
          <p>
            <strong>
              One-off and newsletter emails will be sent immediately once marked as "Active". Onboarding drip emails will be sent on the specified day when marked "Active".
            </strong>
          </p>
        </div>
      <% end %>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const userQuerySelect = document.getElementById('user_query_select');
  const variablesSection = document.getElementById('variables_section');
  
  function toggleVariablesSection() {
    if (userQuerySelect.value && userQuerySelect.value !== '') {
      variablesSection.style.display = 'block';
    } else {
      variablesSection.style.display = 'none';
    }
  }
  
  // Show/hide variables section based on user query selection
  userQuerySelect.addEventListener('change', toggleVariablesSection);
  
  // Initialize on page load
  toggleVariablesSection();
});
</script>
